<template>
	<u-picker :show="show" :columns="columns" keyName="label" @change="changeHandler" ref="uPicker"
		:defaultIndex="defaultIndex" @confirm="handleConfirm" @cancel="show=false"></u-picker>
</template>

<script>
	import calendar from '../../utils/canledar.js'
	const minYear = 1950
	const maxYear = new Date().getFullYear()
	export default {
		name: "datetime-picker",
		props: {
			defaultIndexArr: {
				type: Array,
				default () {
					return []
				}
			},
			isShow: {
				type: Boolean,
				default: false,
			},
			isLunar: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: [],
				show: this.isShow,
				columns: [],
				defaultIndex: []
			};
		},
		watch: {
			isShow() {
				this.show = this.isShow
			},
			show() {
				this.$emit('isShowChange', this.show)
			},
			isLunar() {
				this.init()
			}
		},
		computed: {
			years() {
				return this.isLunar ? this.getLunarYears() : this.getSolarYears()
			},
			lunarDateNow() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return calendar.solar2lunar(year, month, day)
			},
		},
		created() {
			this.init()
		},
		methods: {
			handleConfirm() {
				this.show = false
				this.$emit('change', this.value)
			},
			init() {
				const date = new Date()
				const years = this.years
				const currentYear = this.isLunar ? this.lunarDateNow.lYear : this.lunarDateNow.cYear
				const yearIndex = years.findIndex(el => el.value === currentYear)
				const months = this.getMonth(years[yearIndex].value)
				const currentMonth = this.isLunar ? this.lunarDateNow.IMonthCn : this.lunarDateNow.cMonth
				const monthIndex = months.findIndex(el => this.isLunar ? el.label === currentMonth : el.value ===
					currentMonth)
				const currentDay = this.isLunar ? this.lunarDateNow.lDay : this.lunarDateNow.cDay
				const days = this.getDays(years[yearIndex].value, months[monthIndex].value, months[monthIndex].isLeap)
				const dayIndex = days.findIndex(el => el.value === currentDay)
				this.defaultIndex = this.defaultIndexArr.length ? this.defaultIndexArr : [yearIndex, monthIndex, dayIndex]
				this.value = [years[yearIndex], months[monthIndex], days[dayIndex]]
				this.columns = [
					years,
					months,
					days
				]
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				const year = value[0]
				let month = value[1]
				let monthIndex = indexs[1]
				let dayIndex = indexs[2]
				if (columnIndex === 0) {
					const months = this.getMonth(year.value)
					if (monthIndex > months.length) {
						monthIndex = months.length - 1
					}
					month = months[monthIndex]
					picker.setColumnValues(1, months)
				}
				if (columnIndex === 0 || columnIndex === 1) {
					const days = this.getDays(year.value, month.value, month.isLeap)
					if (dayIndex > days.length) {
						dayIndex = days.length - 1
					}
					picker.setColumnValues(2, days)
					picker.setIndexs([indexs[0], monthIndex, dayIndex], indexs)
				}
				this.value = value
			},
			getLunarYears() {
				const arr = []
				for (let i = minYear; i <= maxYear; i++) {
					arr.push({
						label: i + " " + calendar.toGanZhiYear(i),
						value: i,
						index: i - minYear
					})
				}
				return arr
			},
			getSolarYears() {
				const arr = []
				for (let i = minYear; i <= maxYear; i++) {
					arr.push({
						label: i + '年',
						value: i,
						index: i - minYear
					})
				}
				return arr
			},
			getMonth(year) {
				return this.isLunar ? this.getLunarMonths(year) : this.getSolarMonths()
			},
			getSolarMonths() {
				const arr = []
				for (let i = 1; i <= 12; i++) {
					arr.push({
						label: i + '月',
						value: i,
						index: i - 1
					})
				}
				return arr
			},
			getLunarMonths(year) {
				const month = calendar.leapMonth(year)
				let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
				arr = arr.map(el => ({
					label: calendar.toChinaMonth(el),
					value: el,
					isLeap: false
				}))
				if (month > 0) {
					arr.splice(month, 0, {
						label: '闰' + calendar.toChinaMonth(month),
						value: month,
						isLeap: true
					})
				}
				arr.forEach((el, index) => el.index = index)
				return arr
			},
			getDays(year, month, isLeap) {
				return this.isLunar ? this.getLunarDays(year, month, isLeap) : this.getSolarDays(year, month)
			},
			getLunarDays(year, month, isLeap) {
				let days;
				if (isLeap) {
					days = calendar.leapDays(year)
				} else {
					days = calendar.monthDays(year, month)
				}
				const data = []
				for (let i = 1; i <= days; i++) {
					data.push({
						label: calendar.toChinaDay(i),
						value: i,
						index: i - 1
					})
				}
				return data
			},
			getSolarDays(year, month) {
				const days = new Date(year, month, 0).getDate();
				const arr = []
				for (let i = 1; i <= days; i++) {
					arr.push({
						label: i + '日',
						value: i,
						index: i - 1
					})
				}
				return arr
			},
		}
	}
</script>

<style lang="scss">

</style>
